<template>
  <div class="max">
    <restaurant class="tou"></restaurant>
<!--    <input class="inp" type="text" @change="searchRestaurant" placeholder="        输入关键字..." />-->
<!--    <van-icon class="sousuo" name="search" @click="searchRestaurant" />-->
    <form action="/">
      <van-search
              class="inp"
              v-model="restaurantName"
              show-action
              background="#FFFFFF"
              placeholder="请输入搜索关键词"
              @search="searchRestaurant"
              @cancel="searchRestaurant"
      />
    </form>
    <xiangqing :restaurantList="restaurantList"></xiangqing>
  </div>
</template>

<script>
import restaurant from "../components/home-restaurant.vue";
import xiangqing from "../components/xiangqing.vue";
export default {
  components: {
    restaurant,
    xiangqing,
  },
  data(){
    return{
      restaurantList:[],
      restaurantName:""
    }
  },
  created() {
    this.searchRestaurant();
  },
  methods:{
    searchRestaurant(){
      this.$http.post("/restaurant/restaurant/selectAllByRestaurantName?restaurantName="+this.restaurantName).then(result=>{
        if (result.data.code===2000){
          //console.log(result.data.data)
          this.restaurantList=result.data.data;
        }
      })
    }
  }
};
</script>

<style lang='less' scoped>
.sousuo {
  font-size: 5.6333vw;
  font-weight: 600;
  color: rgb(145, 145, 145);
  position: absolute;
  top: 21.9667vw;
  left: 5.6667vw;
}
.max {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 266.6667vw;
}

.tou {
  position: fixed;
}
.inp {
  font-size: 4.3vw;
  margin-left: 5%;
  padding: 0px;
  width: 90%;
  height: 10.6667vw;
  border: #e74e40 1px solid;
  margin-top: 18.6667vw;
  border-radius: 1.3333vw;
}
</style>